<template>
    <div :style="position_style[position]">
        <div class="view-icon">

            <div class="view-side side-left">
                <i class="material-icons inner-view-icon"
                   :style="getLeftIconStyle(left_icon_size,left_icon_color)"
                   v-text="left_icon==null?'headset':left_icon">
                </i>
                <mu-tooltip placement="top" :content="left_text">
                    <span class="inner-view-icon icon-text"
                          style="bottom:15px;"
                          v-text="subStringWords(left_text,5)">
                                    </span>
                </mu-tooltip>

            </div>
            <div class="mid-icon-item">
                <i class="material-icons"
                   :style="getMidIconStyle(mid_icon_size,mid_icon_color)"
                   v-text="mid_icon==null?'favorite':mid_icon"
                   v-on:click="$emit('loveYou')">
                </i>
                <mu-tooltip  placement="top" :content="mid_text">
                <span class="mu-bottom-item-text"
                      :style="getMidFontStyle(mid_font_size,mid_font_color,random_color)"
                      v-text="subStringWords(mid_text,5)">
                </span>
                </mu-tooltip>
            </div>

            <div class="view-side side-right">
                <i class="material-icons inner-view-icon"
                   :style="getRightIconStyle(right_icon_size,right_icon_color)"
                   v-text="right_icon==null?'poll':right_icon">
                </i>
                <mu-tooltip placement="top" :content="right_text">
                <span class="inner-view-icon icon-text"
                      style="bottom:15px;"
                      v-text="subStringWords(right_text,5)">
                </span>
                </mu-tooltip>
            </div>
        </div>
    </div>

</template>

<script>

    export default {

        name: "LovePanel",
        components: {},
        props: {
            right_text: String,
            mid_text: String,
            left_text: String,
            position: String,

            random_color: String,
            mid_icon: String,
            mid_icon_color: String,
            mid_icon_size: String,
            mid_font_color: String,
            mid_font_size: String,


            left_icon: String,
            left_icon_size: String,
            left_icon_color: String,
            left_font_color: String,
            left_font_size: String,

            right_icon: String,
            right_icon_size: String,
            right_icon_color: String,
            right_font_color: String,
            right_font_size: String,

        },
        data() {
            return {
                style: "color:black",
                position_style: {
                    'top': {
                        position: "fixed",
                        width: "100%",
                        top: "10vh",
                        textAlign: "center"
                    },
                    'bottom': {
                        position: "fixed",
                        width: "100%",
                        bottom: "0vh",
                        textAlign: "center"
                    }
                },
                mid_icon_style: {
                    color: "red",
                    fontSize: "18vh",
                    textShadow: "2px 2px 4px rgba(90, 0, 0, 0.62)"
                },
                mid_font_style: {
                    paddingBottom: "1vh",
                    fontSize: "20px",
                    fontWeight: "bold",
                    color: "black"
                },
                left_icon_style: {
                    bottom: "35px",
                    fontSize: "24px",
                    color: "#808080"

                },
                right_icon_style: {
                    bottom: "35px",
                    color: "#808080",
                    fontSize: "24px",
                }

            }
        },
        methods: {
            randomColor() {
                let r = Math.floor(Math.random() * 220)
                let g = Math.floor(Math.random() * 220)
                let b = Math.floor(Math.random() * 220)
                return 'rgba(' + r.toString() + ',' + g.toString() + ',' + b.toString() + ',1)'
            },

            getMidIconStyle(love_size = null, love_color = null) {
                if (love_size != null) {
                    this.mid_icon_style.fontSize = love_size
                }
                if (love_color != null) {
                    this.mid_icon_style.color = love_color
                }
                return this.mid_icon_style
            },
            getMidFontStyle(mid_font_size = null, mid_font_color = null, random_color) {
                if (mid_font_size != null) {
                    this.mid_font_style.fontSize = mid_font_size
                }
                if (mid_font_color != null) {
                    this.mid_font_style.color = mid_font_color
                }
                this.random_color = random_color
                return this.mid_font_style
            },

            getLeftIconStyle(left_icon_size = null, left_icon_color = null) {
                if (left_icon_size != null) {
                    this.left_icon_style.fontSize = left_icon_size
                }
                if (left_icon_color != null) {
                    this.left_icon_style.color = left_icon_color
                }
                return this.left_icon_style
            },

            getRightIconStyle(right_icon_size = null, right_icon_color = null) {
                if (right_icon_size != null) {
                    this.right_icon_style.fontSize = right_icon_size
                }
                if (right_icon_color != null) {
                    this.right_icon_style.color = right_icon_color
                }
                return this.right_icon_style
            },
            subStringWords(words, len) {
                if (words != null) {
                    if (words.hasOwnProperty('length')) {
                        let end = words.length > len ? len : words.length
                        let n_title = words.substring(0, end)
                        if (words.length > len) {
                            n_title += "..."
                        }
                        return n_title
                    }
                    return words
                }
                return ''


            }

        },
        mounted() {
            if (this.random_color === "true") {
                setInterval(() => {
                    this.mid_font_style.color = this.randomColor()
                }, 520)
            }

        },beforeDestroy() {
            //由于muse-ui的tool_tips 有残留问题，需要手动清理
           let tool_tips= document.getElementsByClassName('mu-tooltip')
           for (let i=0;i<tool_tips.length;i++){
               tool_tips[i].style.display='none'
           }
        }

    }
</script>

<style lang="stylus">
    .me-view
        position fixed
        width 100%
        top 10vh
        text-align center

    .me-view-icon
        align-items center
        padding 0px
        margin 0px
        color red
        font-size 18vh
        text-shadow 2px 2px 4px rgba(90, 0, 0, 0.62)

    .view-side
        display inline-block
        color gray


    .inner-view-icon
        position: absolute;


    .icon-text
        overflow hidden
        white-space nowrap

    .side-left
        float left
        margin-left 13%

    .side-right
        float right
        margin-right 20%
</style>